<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:insert="~{include :: header('用户(前台用户)列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <div class="row">
        <div class="col-sm-12">
            <form id="formId" class="form-inline">
                <input class="form-control mr-1" placeholder="id/手机号/用户名" type="text" name="searchKey"/>
                <select class="form-control mr-1" name="isAvailable" th:with="type=${@dict.getType('qdx_user_state')}">
                    <option value="">状态</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
                <select class="form-control mr-1" name="registerFrom" th:with="type=${@dict.getType('qdx_user_register')}">
                    <option value="">来源</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
                <a class="btn btn-primary btn-rounded mr-1" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </form>
        </div>
        <div class="toolbar" id="toolbar" role="group">
            <a class="btn btn-success mr-1" onclick="$.operate.add()" shiro:hasPermission="user:add">
                <i class="fa fa-plus"></i> 添加
            </a>
        <!--    <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="user:export">
                <i class="fa fa-download"></i> 导出
            </a>-->
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" class="table-striped"></table>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('user:remove')}]];
    var isAvailableDatas = [[${@dict.getType('qdx_user_state')}]];
    var registerFromDatas = [[${@dict.getType('qdx_user_register')}]];
    var prefix = "/user";

    $(function() {
        var options = {
            url: prefix + "/list.json",
            createUrl: prefix + "/add.html",
            updateUrl: prefix + "/edit/{id}",
            exportUrl: prefix + "/export",
            modalName: "用户",
            showToolbar: false,
            showColumns: false,
            showRefresh: false,
            columns: [
                {
                    field: 'userId',
                    title: 'id',
                },
                {
                    field: 'userName',
                    title: '用户名'
                },
                {
                    field: 'mobile',
                    title: '手机号'
                },
                {
                    field: 'registerFrom',
                    title: '注册来源',
                    formatter: function (value, row, index) {
                        switch (value) {
                            case "ADMIN":
                                return "后台开通"
                            case "THIRD":
                                return "第三方注册"
                            case "WEB":
                                return "平台注册"
                            case "MOBILE":
                                return "手机注册"
                            case "WEIXIN":
                                return "微信注册"
                            default:
                                return "未知"
                        }
                    }
                },
                {
                    field: 'isAvailable',
                    title: '状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(isAvailableDatas, value);
                    }
                },
                {
                    field: 'createTime',
                    title: '注册时间'
                },
                {
                    title: '操作',
                    width: 280,
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        if (row.isAvailable === 1) {
                            actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="openOrClose(\'' + row.userId + '\',\'' + 2 + '\')"><i class="fa fa-remove"></i>禁用</a> ');
                        } else {
                            actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="openOrClose(\'' + row.userId + '\',\'' + 1 + '\')"><i class="fa fa-eyedropper"></i>启用 </a> ');
                        }
                        actions.push("<a class='btn btn-info btn-xs' href='javascript:void(0)' onclick='openOrderList(" + row.userId + ")'><i class='fa fa-balance-scale'></i>订单详情</a> ");
                        actions.push("<a class='btn btn-primary btn-xs' href='javascript:void(0)' onclick='selectCousre(" + row.userId + ")'><i class='fa fa-mortar-board'></i>赠送课程</a> ");
                        actions.push("<a class='btn btn-warning btn-xs' href='javascript:void(0)' onclick='selectMember(" + row.userId + ")'><i class='fa fa-drivers-license-o'></i>赠送会员</a> ");
                        actions.push("<a class='btn btn-info btn-xs' href='javascript:void(0)' onclick='userRecord(" + row.userId + ")'><i class='fa fa-handshake-o'></i>分享记录</a> ");
                        actions.push("<a class='btn btn-warning btn-xs' href='javascript:void(0)' onclick='userLogin(" + row.userId + ")'><i class='fa fa-map'></i>日志</a> ");
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    //禁用或启用用户
    function openOrClose(id,sta) {
        table.set();
        var str = "";
        if (sta === 1) {
            str = "确定要启用该用户吗？"
        } else {
            str = "确定要禁用该用户吗？"
        }
        $.modal.confirm(str, function () {
            var data = {"userId": id, "isAvailable": sta};
            $.operate.submit(prefix + "/status.json", "post", "json", data);
        });
    }

    //打开订单窗口
    function openOrderList(userId){
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "订单详情",
            content: "/order/list.html?userId="+userId
        });
    }

    //查询赠送课程列表
    function selectCousre(userId) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "课程列表",
            content: "/user/course/list.html?userId="+userId
        });
    }

    //查询赠送会员列表
    function selectMember(userId) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "会员列表",
            content: "/user/member/list.html?userId="+userId
        });
    }

    //查询用户登录日志
    function userLogin(userId) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "登录日志",
            content: "/user/login/list.html?userId="+userId
        });
    }

    //查询用户邀请记录
    function userRecord(userId) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "邀请记录",
            content: "/user/record/list.html?userId="+userId
        });
    }

</script>
</body>
</html>